<!--
 * @Description: 选择农场页面
-->
<template>
  <div class="choose-company">
    <Header />

    <div class="main-content" :class="{ hidden: showSystemChooseModal }">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="slidebar">
          <div class="list">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="item"
              :class="activeIdx === index ? 'active' : ''"
              @click="changeActiveIdx(index, item)"
            >{{ item }}</div>
          </div>
        </div>
      </el-scrollbar>
      <div v-if="showTopList" class="first-tankuang">
        <div class="farm-select">
          <div v-for="(item, ind) in organizationList" :key="ind" class="farm-item">
            <div class="pic" @click="chooseTopOrganization(item)">
              <!-- <div class="child-farm" @click.stop="selectfarmchild(item)">选择下级</div> -->
            </div>
            <div class="title">{{ item.organizationName }}</div>
            <div class="loc">
              <i class="el-icon-location"></i>
              <div class="addr">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tree-select">
        <div class="tree-content">
          <div class="content-title">公司组织架构</div>
          <div class="content-tree">
            <Siderbar :organization-list="orgTreeList" @chooseCompany="chooseOrganization" />
          </div>
        </div>
      </div>
      <div class="farm-select">
        <div v-for="(item, ind) in orgList" :key="ind" class="farm-item">
          <div class="pic" @click="chooseOrganization(item)">
            <!-- <div class="child-farm" @click.stop="selectfarmchild(item)">选择下级</div> -->
          </div>
          <div class="title">{{ item.organizationName }}</div>
          <div class="loc">
            <i class="el-icon-location"></i>
            <div class="addr">{{ item.address }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择系统 -->
    <div class="system-choose-modal" :class="{ active: showSystemChooseModal }">
      <div class="system-choose-box">
        <div class="system-content">
          <div class="system-name">系统列表</div>
          <div
            class="system-list"
            :style="systemList.length <= 5 ? 'justify-content: center;' : ''"
          >
            <!-- 卡片式 -->
            <div
              v-for="(item, index) in systemList"
              :key="index"
              class="system-choose-item"
              :class="item.virtualSystemNo"
              @click="chooseSystem(item)"
            >
              <div class="ds"></div>
              <div class="system-choose-item-body">
                <div class="img"></div>
                <div class="name">{{ item.virtualSystemName }}</div>
              </div>
              <img src="~@/assets/farm/11.png" class="system-btn" />
            </div>
          </div>
        </div>
        <div class="system-content">
          <div class="system-name">大屏列表</div>
          <div class="system-list">
            <!-- 卡片式 -->
            <div
              v-for="(item, index) in screenList"
              :key="index"
              class="system-choose-item"
              @click="chooseScreen(item)"
            >
              <div class="ds"></div>
              <div class="system-choose-item-body">
                <div class="img" :class="getfarm(item.farmingTypeNo)">
                  <!-- <b class="img-p">点击进入</b> -->
                </div>
                <div class="name">{{ item.bigScreenName }}</div>
              </div>
              <!-- <div class="system-btn">点击进入</div> -->
              <img src="~@/assets/farm/22.png" class="system-btn" />

              <!-- <div class="name">{{ item.bigScreenName }}</div> -->
            </div>
          </div>
        </div>
      </div>
      <img src="@/assets/farm/33.png" class="back-btn" @click="showSystemChooseModal = false" />
    </div>
    <div class="copyright">
      版权所有：中科台达（浙江）信息技术有限公司｜ Copyright © 2019-2025
      casdelta.com All Right Reserved
      <br />
      <a
        href="https://beian.miit.gov.cn"
        target="view_window"
      >ICP备案号：浙ICP备19034790号-5</a>
    </div>
    <!-- 特殊 -->
    <!-- <div class="copyright">
      版权所有：COPYRIGHT © 渔雅科技（上海）有限公司
      <br />
      <a href="https://beian.miit.gov.cn" target="view_window">
        ICP备案号：沪ICP备20003371号-1</a>
    </div>-->
  </div>
</template>
<script>
import Header from "@/layout/components/Header/index";
// import Footer from "@/layout/components/Footer/index";
import userService from "@/api/user/index";
// import tenantService from "@/api/tenant-info/index.js";
import permission from "@/store/modules/permission";
import { getToken, setToken, removeToken } from "@/utils/auth";
import Siderbar from "./components/Siderbar";
import { getpasCookie } from "@/utils/cookie";
import getfarmtypelistmethod from "@/api/basic-info-manage/agricultural-type-manage";
export default {
  name: "ChoseCompany",
  components: { Header, Siderbar },
  data() {
    return {
      selectstau: 1, // 1为选择顶级组织结构，2为选择选择农场
      ischildfarmstau: false, // 展示子农场
      showSystemChooseModal: false, // 选择系统弹窗
      showTopList: true, // 展示顶级组织
      organizationList: [], // 顶级组织结构列表
      orgList: [], // 组织列表
      orgTreeList: [], // 树状组织列表
      activeIdx: "",
      search: "",
      farmList: [{ organizationName: "星光农场", organizationNo: 1 }],
      // 星光农场下的组织
      // 被选择的id
      nowChildFarmSelectIdList: [],
      // 列表信息
      childfarmlist: [],
      // true 启用动态路由 false 启用静态路由
      nowmenutype: permission.nowmenutype,
      systemList: [],
      screenList: [],
      farmingTypeNo: [],
      farmtypelist: []
    };
  },
  computed: {
    list() {
      let arr = [...Array(26).keys()].map(i => String.fromCharCode(i + 65));
      arr.unshift("#");
      return arr;
    }
  },
  watch: {},
  mounted() {
    this.tologin();
    // 查询农场
    this.getFarmList();
    if (this.$store.state.permission.addRoutes.length > 0) {
      // 判断是否已经刷新
      // location.reload();
      history.go(0);
    }
  },
  methods: {
    // 查询左侧树状列表
    queryTreeByOrganizationNoList() {
      let list = this.orgList.map(el => {
        return el.organizationNo;
      });
      userService.queryTreeByOrganizationNoList(list).then(res => {
        if (res.code !== 1) {
          return;
        }
        this.orgTreeList = res.data || [];
        if (this.orgTreeList[0]) {
          setToken("organizationName", this.orgTreeList[0].organizationName);
        }
      });
    },
    async chooseTopOrganization(item) {
      setToken("topOrganization", item.organizationNo);
      if (!getToken("databaseName")) {
        let res = await userService.queryDatabaseNameByOrganizationNo(
          item.organizationNo
        );
        setToken("databaseName", res.data.databaseName);
      }
      // console.log('getToken', getToken('databaseName'))
      let ress = await userService.queryOrganization(item.organizationNo);
      if (ress.code !== 1) {
        return;
      }
      this.orgList = ress.data || [];
      if (this.orgList.length === 1) {
        // 我不知道改得有什么问题
        setToken("organizationNo", ress.data[0].organizationNo);
        // 查询下一级
        let orgliststring = await this.getchildnodeidlist(
          ress.data[0].organizationNo
        );
        // console.log(orgliststring)
        // let orgidlisttwo
        // if (orgliststring.length > 0) {
        //   orgidlisttwo = item.organizationNo + ',' + orgliststring
        // } else {
        //   orgidlisttwo = item.organizationNo
        // }
        setToken("organizationList", orgliststring);
        await this.openSystemChooseModal(ress.data[0].organizationNo);

        this.queryTreeByOrganizationNoList();
        this.showTopList = false;
      } else {
        // 我不知道改得有什么问题
        setToken("organizationNo", ress.data[0].organizationNo);
        // 查询下一级
        let orgliststring = await this.getchildnodeidlist(
          ress.data[0].organizationNo
        );
        setToken("organizationList", orgliststring);
        this.queryTreeByOrganizationNoList();
        this.showSystemChooseModal = false;
        this.showTopList = false;
      }

      // })
    },
    tologin() {
      let tr = this.$route.query;
      if (tr.account) {
        let loginForm = {
          account: decodeURIComponent(tr.account),
          password: tr.password
        };
        this.$router.push({ path: "/login", query: loginForm });
      }
    },
    // 获取顶级组织结构id
    getFarmList() {
      userService.organizationTop().then(res => {
        this.organizationList = res.data;
        if (res.length === 0 || res.data === []) {
          this.$message.warning("该账户下无公司，请联系管理员！");
          removeToken("token");
          this.$router.push({ path: "/login" });
        } else if (this.organizationList.length === 1) {
          this.goToTheFarm(this.organizationList[0]);
        }
      });
    },
    // 点击农场:rouertpid用于获取菜单
    async goToTheFarm({ organizationNo }) {
      // console.log('goToTheFarm', organizationNo, organizationName);
      // virtualSystem/queryOrganization?topOrganizationNo=${e.organizationNo}
      // 存储顶级农场id
      // if (!getToken('databaseName')) {
      // console.log(organizationNo)
      setToken("topOrganization", organizationNo);
      // console.log(getToken('topOrganization'))
      await this.chooseTopOrganization({ organizationNo: organizationNo });
      // }
      // setToken("organizationMark", organizationMark)

      // setToken("routerpid", rouertpid)
      // // 存储承租户的parentid,当isTenant===true,settoken-parentid
      // // ----
      // if (isTenant) {
      //   // 判断有没有下级
      //   userService.gettreeslist(organizationNo).then(
      //     // userService.farmListbyOrganizationId(this.farmList[0].organizationNo).then(
      //     res => {
      //       let childlistone = res.data
      //       // this.childfarmlist = this.filterArrForKey(childlistone)
      //       setToken("parentId", childlistone[0].parentId)
      //     }
      //   )
      // }
      // // --------------
      // // 存储所有组织结构字符串
      // // console.log(rouertpid, this.nowmenutype, this.$router.push({ name: "ZhControlView" }))

      // 显示选择系统页面
    },
    async chooseOrganization(item) {
      // 我不知道改得有什么问题
      // 查询下一级
      let orgliststring = await this.getchildnodeidlist(item.organizationNo);
      // console.log(item, orgliststring)
      // let orgidlisttwo
      // if (orgliststring.length > 0) {
      //   orgidlisttwo = item.organizationNo + ',' + orgliststring
      // } else {
      //   orgidlisttwo = item.organizationNo
      // }
      setToken("organizationList", orgliststring);
      setToken("organizationNo", item.organizationNo);
      // this.getfarmtype()
      await this.openSystemChooseModal(item.organizationNo);
      if (item) {
        setToken("organizationName", item.organizationName);
      }
    },
    cascaderChange() {
      // console.log(e)
    },
    // 选择公司时database
    getdataname(id) {
      // 获取databasename 并且存储session
      userService.getdatabasename(id).then(res => {
        let databaseName = res.data.databaseName;
        setToken("databaseName", databaseName);
      });
    },
    // 通过接口查子节点id
    async getchildnodeidlist(id) {
      let newArr = [];
      await userService.getchildidlist(id).then(res => {
        newArr = res.data;
        // newArr.splice(0, 1)
        return newArr;
      });
      return newArr;
    },
    // 循环过滤树形数组
    filterArrForKey(arr) {
      let newArr = [];
      // eslint-disable-next-line eqeqeq
      if (arr == []) {
        return;
      }
      newArr = arr.map(item => {
        if (item.child.length > 0) {
          item = {
            ...item,
            child: this.filterArrForKey(item.child)
          };
        } else {
          delete item.child;
        }
        return item;
      });
      newArr = newArr.filter(item => item != null);
      return newArr;
    },
    // ---侧边栏abcd选择，然而并没什么用
    changeActiveIdx(idx, item) {
      this.activeIdx = idx;
      this.search = item;
      // console.log(this.search);
    },

    // 拉取系统选择界面
    openSystemChooseModal(no) {
      this.showSystemChooseModal = true;
      userService.queryVirtualSystem(no).then(res => {
        if (res.code !== 1) {
          return;
        }
        let systemList = res.data.filter(item => {
          return (
            item.virtualSystemNo.indexOf("app") === -1 &&
            item.virtualSystemNo.indexOf("App") === -1 &&
            item.virtualSystemNo.indexOf("ZMfatten") === -1 &&
            item.virtualSystemNo.indexOf("ZM") !== -1 ||
            item.virtualSystemNo.indexOf('ZY') !== -1 ||
            item.virtualSystemNo.indexOf('ZY-YY') !== -1 ||
            item.virtualSystemNo.indexOf('traceability') !== -1 ||
            item.virtualSystemNo.indexOf('sy') !== -1
          );
        });
        this.systemList = systemList;
        if (getToken("virtualSystemNo") !== undefined) {
          let index = this.systemList.findIndex(
            item => item.virtualSystemNo === getToken("virtualSystemNo")
          );
          console.log(
            this.systemList,
            this.systemList[index],
            getToken("virtualSystemNo"),
            index
          );
          if (index !== -1) {
            console.log(this.systemList[index]);
            this.chooseSystem(this.systemList[index]);
          }
        }
      });
      userService.getOrganizationBigScreen(no).then(res => {
        if (res.code !== 1) {
          return;
        }
        res.data.forEach(async element => {
          // element['farmingTypeNo'] = console.log(await this.getfarmtype())
          // this.$set(element, "farmingTypeNo", await this.getfarmtype());
          this.$set(element, "farmingTypeNo", await this.getfarmtype());
        });
        // console.log(res.data)
        this.screenList = res.data;
      });
      console.log(sessionStorage.farming,'sessionStorage.farmingType')
      if(sessionStorage.farming!=='FISH'){
        this.getfarmtypes();
      }
    },
    // 选择系统
    async chooseSystem(item) {
      setToken("virtualSystemNo", item.virtualSystemNo);
      // 让动态路由重新加载
      setToken("systemName", item.virtualSystemName);
      setToken("logo", item.logo);
      this.getSystemzation();
      if (item.virtualSystemNo.includes('sy')) {
        let c = JSON.parse(getToken("userInfo"));
        // console.log(c)
        // let x = getpasCookie(c.account + "&" + c.password);
        // let zhurl = `https://matefarm.net/agri-machine-management/#/login?account=${x.account}&password=${x.password}&organizationNo=${sessionStorage.organizationNo}`;
        let zhurl = `${this.$webSerUrl}agricultural-management-platform/#/login-loading?token=${c.account + "&" + c.password}&organizationNo=${sessionStorage.organizationNo}&virtualSystemNo=${item.virtualSystemNo}`;
        // window.open(zhurl, "_blank");
        window.location.href = zhurl
        return;
      }
      // if (this.nowmenutype) {
      //   store.dispatch("permission/generateRoutes").then(res => {
      //     this.$router.push({ name: `${res[0].children[0].name}` });

      //     // console.log(this.$store.state.permission.pageElementList, 'pageElementList');
      //     // userService.queryPageElement(item.virtualSystemNo).then(eleres=>{
      //     // })
      //   });
      // } else {
      this.$router.push({ name: "ZhControlView" });
      // }
    },
    chooseScreen(item) {
      let c = JSON.parse(getToken("userInfo"));
      // console.log(c)
      let x = getpasCookie(c.account + "&" + c.password);
      // console.log(x)
      // 老配置化大屏
      if (item.url.includes('bigscreencfi')) {
        let zhurl = `${item.url}?token=${c.account + "&" + c.password}&organizationNo=${sessionStorage.organizationNo}&virtualSystemNo=${item.virtualSystemNo}`;
        window.open(zhurl, "_blank");
        return;
        // 新配置大屏？？
      } else if (item.url.includes('showCockpit')) {
        let json = { username: x.account, password: x.password };
        let token = btoa(encodeURIComponent(JSON.stringify(json)));
        let zhurl = `${item.url}?token=${token}&organizationNo=${sessionStorage.organizationNo}&databaseName=${sessionStorage.databaseName}`;
        window.open(zhurl, "_blank");
        return;
        // 老大屏的单独项目
      } else {
        let zhurl = `${item.url}?account=${x.account}&password=${x.password}&organizationNo=${sessionStorage.organizationNo}`;
        window.open(zhurl, "_blank");
        return;
      }
    },
    async getSystemzation() {
      // const { data: res } = await userService.getSystemzation();
      // const { data: tenant } = await tenantService.querysesByCondition({
      //   organizationNo: sessionStorage.organizationNo,
      //   personNo: res.personNo
      // });
      // if (tenant.length > 0) {
      //   setToken("lesseeNo", tenant[0].lesseeNo);
      //   tenantService.querybindCache(tenant[0].lesseeNo);
      // }
      await getfarmtypelistmethod
        .queryByCondition({ organizationNo: getToken("organizationNo") })
        .then(({ data, code }) => {
          if (code === 1 && data[0] !== undefined) {
            setToken("breedTypeNo", data[0]?.breedTypeNo);
            setToken("breedTypeName", data[0]?.breedTypeName);
          }
        });
    },
    // 获取大屏农业类型
    async getfarmtype() {
      let leng = getToken("organizationNo");
      this.isshowtobigsceen = true;
      const res = await getfarmtypelistmethod.ownFarmingTypelist({
        organizationNo: leng
      });
      this.loading = false;
      // console.log('liudw', res)
      if (res.code === 0) {
        this.$message.error("当前农业类型获取失败");
      } else {
        // console.log('liudw', res)
        this.farmingTypeNo = res.data[0]?.farmingTypeNo;
        this.farmtypelist = res.data;
        // setToken('farmingTypeNo', res.data[0].farmingTypeNo)
        return res.data[0]?.farmingTypeNo;
      }
    },
    async getfarmtypes() {
      let leng = getToken("organizationNo");
      const res = await getfarmtypelistmethod.ownFarmingTypelist({
        organizationNo: leng
      });
      if (res.code === 0) {
        this.$message.error("当前农业类型获取失败");
      } else {
        setToken("farmingTypeNo", res.data[0]?.farmingTypeNo);
      }
    },
    getfarm(e) {
      if (e) {
        // console.log(e)
        let farming = "";
        switch (e) {
          case "dt":
            farming = "dt";
            break;
          case "dp":
            farming = "dp";
            break;
          case "gc":
            farming = "gc";
            break;
          case "sc":
            farming = "sc";
            break;
          case "xm":
            farming = "xm";
            break;
          case "":
            break;
        }
        return farming;
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
$slidebarWidth: 40px;
$highBule: rgb(0, 235, 208);
@keyframes borderbg {
  from {
    border-radius: 0;
  }
  to {
    background-color: $appMainTextColor;
    color: #333;
    border-radius: 20px;
  }
}

.choose-company {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  ::v-deep(.header) {
    flex-shrink: 0;
  }
  .main-content {
    height: calc(100% - 60px);
    background-color: $appMainBgColor;
    display: flex;
    justify-content: space-between;
    .tree-select {
      width: 240px;
      height: 100%;
      padding: 16px;
    }
    .farm-select {
      width: calc(100% - 280px);
      height: 100%;
      display: flex;
      // justify-content: center;
      // align-items: center;
      justify-content: space-around;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      overflow-y: auto;
      .farm-item {
        width: 30%;
        height: 300px;
        position: relative;
        margin-bottom: 20px;
        margin-top: 20px;
        // margin-right: 1.5%;
        // margin-left: 1.5%;
        background: #549BE390;
        border-radius: 10px;
        border: 1px solid #549BE390;
        color: $appMainTextColor;
        padding: 15px;
        padding-bottom: 10px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: 0.5s;
        &:nth-child(4n) {
          margin-right: 0;
        }
        &:hover {
          transform: scale(1.05);
        }
        .pic {
          width: 100%;
          height: 80%;
          border: 1px solid #549BE390;
          // background-image: url("~@/assets/index-bgc.png");
          background-image: url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg);
          background-color: $appMainBgColor;
          background-size: cover;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          .child-farm {
            width: 97px;
            height: 26px;
            background: linear-gradient(
              180deg,
              rgba(0, 193, 254, 1) 0%,
              rgba(41, 177, 220, 1) 57.22%,
              rgba(51, 207, 255, 1) 100%
            );
            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.26);
            border-radius: 5px;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            text-align: center;
            line-height: 26px;
          }
        }
        .title {
          width: 100%;
          text-align: center;
          font-size: 0.8vw;
          margin: 5px 0;
        }
        .loc {
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 0.8vw;
          i {
            color: #56845b;
            font-size: 20px;
            margin-right: 5px;
          }
        }
      }
    }

    .el-scrollbar {
      height: 100%;
      width: $slidebarWidth;
      background-color: #549BE390;
      .slidebar {
        width: $slidebarWidth;
        height: 100%;
        // overflow-y: auto;
        .list {
          width: 100%;
          height: 100%;
          border-radius: 50px;
          display: flex;
          flex-direction: column;
          .item {
            width: $slidebarWidth;
            height: $slidebarWidth;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $appMainTextColor;
            font-size: 16px;
            cursor: pointer;
            &:hover {
              animation-name: borderbg;
              animation-iteration-count: 1;
              animation-fill-mode: forwards;
              animation-duration: 0.5s;
            }
          }
          .active {
            font-weight: bold;
            background-color: $appMainTextColor;
            color: #333;
            border-radius: 50px;
          }
        }
      }
    }
  }
}

.tree-select {
  .tree-content {
    height: 100%;
    background: $headerBg;
    .content-title {
      line-height: 50px;
      color: $appMainTextColor;
      text-align: center;
      border-bottom: 1px dashed #fff;
    }
    .content-tree {
      height: calc(100% - 50px);
    }
  }
}

.first-tankuang {
  width: 100%;
  height: calc(100% - 24px);
  background-color: $appMainBgColor;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;

  .farm-select {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .farm-item {
      width: 400px;
      height: 300px;
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
      background: #549BE390;
      border: 1px solid #549BE390;
      color: $appMainTextColor;
      border-radius: 10px;
      padding: 15px;
      padding-bottom: 10px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: 0.5s;
      &:nth-child(4n) {
        margin-right: 0;
      }
      &:hover {
        transform: scale(1.05);
      }
      .pic {
        width: 100%;
        height: 80%;
        border: 1px solid #549BE390;
        // background-image: url("~@/assets/index-bgc.png");
        background-image: url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg);
        background-color: $appMainBgColor;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        .child-farm {
          width: 97px;
          height: 26px;
          background: linear-gradient(
            180deg,
            rgba(0, 193, 254, 1) 0%,
            rgba(41, 177, 220, 1) 57.22%,
            rgba(51, 207, 255, 1) 100%
          );
          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.26);
          border-radius: 5px;
          color: rgba(255, 255, 255, 1);
          font-size: 16px;
          text-align: center;
          line-height: 26px;
        }
      }
      .title {
        width: 100%;
        text-align: center;
        font-size: 0.8vw;
        margin: 5px 0;
      }
      .loc {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 0.8vw;
        i {
          color: #56845b;
          font-size: 20px;
          margin-right: 5px;
        }
      }
    }
  }
}

.three-tankuang {
  width: 100%;
  height: calc(100% - 24px);
  background-color: rgba(228, 228, 228, 0.5);
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .childcompany-list {
    border-radius: 9px;
    width: 590px;
    height: 250px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 1);
    .org-title {
      background-color: rgba(0, 110, 145, 1);
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      height: 60px;
      // border-bottom: $appMainTextColor 1px solid;
      color: $appMainTextColor;
      padding-left: 20px;
      font-size: 23px;
      display: flex;
      align-items: center;
      .sel-te {
        padding-left: 10px;
        line-height: 27px;
        height: 27px;
        border-left: $appMainTextColor 4px solid;
        color: $appMainTextColor;
        font-size: 23px;
      }
    }
    .select-main {
      width: 500px;
      margin: 50px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 9px;
      .far-sel {
        width: 300px;
        .el-cascader {
          width: 300px;
        }
      }
      .toindex-but {
        margin-left: 20px;
        width: 50px;
        height: 32px;
        cursor: pointer;
        color: $appMainTextColor;
        line-height: 32px;
        white-space: nowrap;
        text-align: center;
        background-color: #7fd354;
        border-top-left-radius: 0px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 0px;
      }
      .quxiao-but {
        margin-left: 10px;
        width: 50px;
        height: 32px;
        cursor: pointer;
        color: $appMainTextColor;
        line-height: 32px;
        white-space: nowrap;
        text-align: center;
        background-color: #c6c938;
        border-top-left-radius: 0px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 0px;
      }
    }
  }
}
.system-choose-modal {
  width: calc(100% - 40px);
  height: calc(100% - 84px);
  background-color: $appMainBgColor;
  position: absolute;
  top: 60px;
  left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  opacity: 0;
  transition: all 0.5s;
  pointer-events: none;
  &.active {
    opacity: 1;
    pointer-events: auto;
  }
  .back-btn {
    position: absolute;
    right: 50px;
    top: 50px;
    color: $highBule;
    cursor: pointer;
  }

  .system-choose-item-body {
    width: 100%;
    height: 100%;
    position: absolute;
    // background: #0c272e;
    // border: 2px solid;
    // border-image: linear-gradient(180deg, #007180 0%, #00E2FF 51%, #007180 100%) 50 50;
    border: 2.5px solid #347dcd;
    border-radius: 16px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    // 背景和框 配置样式 （背景样式， border 颜色 ）
    // background-image: linear-gradient(to right, #0c272e, #0c272e),
    //   linear-gradient(180deg, #007180 0%, #00e2ff 51%, #007180 100%);
    // // }
    overflow: hidden;
    // text-shadow: 1px 1px 0px #000;
    z-index: 0;
    // &::after {
    //   content: "";
    //   height: 294px;
    //   width: 214px;
    //   background: #00e2ff;
    //   position: absolute;
    //   top: 244px;
    //   left: 18%;
    //   border-radius: 165px;
    //   box-shadow: 0px 0px 68px 65px #00e2ff;
    // }
    // &::before {
    //   content: "";
    //   height: 294px;
    //   width: 214px;
    //   background: #00e2ff;
    //   position: absolute;
    //   bottom: 244px;
    //   left: 18%;
    //   border-radius: 165px;
    //   box-shadow: 0px 0px 68px 65px #00e2ff;
    // }
  }
  .system-choose-box {
    width: 100%;
    height: 100%;
    // background: rgba(31, 123, 148, 0.4);
    padding: 12px 0;
    .system-content {
      height: 50%;
      position: relative;
      // &::after {
        // content: "";
        // position: absolute;
        // width: calc(100% - 120px);
        // height: 1px;
        // background: rgb(0, 104, 108);
        // top: 25px;
        // left: 85px;
      // }
      .system-name {
        color: #000;
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-left: 10px;
        top: 10px;
        width: 100%;
        text-align: center;
        font-size: 30px;
        // &::before {
        //   content: "";
        //   width: 3px;
        //   height: 30px;
        //   position: absolute;
        //   left: 0;
        //   top: 0;
        //   // background: $highBule;
        // }
        // &::after {
        //   content: "";
        //   position: absolute;
        //   width: 8px;
        //   height: 8px;
        //   border-radius: 50%;
        //   // background: $highBule;
        //   top: 11px;
        //   left: 85px;
        //   z-index: 1;
        //   box-shadow: 0 0 5px $highBule;
        // }
      }
      .system-list {
        width: 100%;
        height: 90%;
        display: flex;

        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        .system-choose-item {
          color: $appMainTextColor;
          min-width: 331px;
          width: 331px;
          height: 200px;
          // min-width: 20%;
          transition: all 0.5s;
          position: relative;
          // overflow: hidden;
          cursor: pointer;
          // 奇怪的按钮
          // &:hover {
          // font-size: 17px;
          // background-color: #4fc08d;
          // }
          // .ds {
          //   height: 100%;
          //   width: 100%;
          //   position: absolute;
          //   overflow: hidden;
          //   border-radius: 16px;
          //   z-index: -1;
          //   // background:  #ffffff;
          //   filter: blur(3px);
          //   &:hover::after {
          //     // font-size: 17px;
          //     background: initial;
          //   }

          //   &:before,
          //   &:after {
          //     content: "";
          //     position: absolute;
          //     border-radius: 16px;
          //     top: -1px;
          //     right: -1px;
          //     background: linear-gradient(
          //       45deg,
          //       #ffffff,
          //       #00ecf5,
          //       #ffffff,
          //       #00ecf5,
          //       #ffffff,
          //       #00ecf5,
          //       #ffffff,
          //       #00ecf5,
          //       #ffffff,
          //       #00ecf5,
          //       #ffffff,
          //       #00ecf5
          //     );
          //     background-size: 400%;
          //     width: calc(100% + 2px);
          //     height: calc(100% + 2px);
          //     z-index: -1;
          //     transform-origin: right;
          //     animation: animate 5s linear infinite;
          //     filter: blur(3px);
          //   }

          //   &:after {
          //     filter: blur(3px);
          //   }

          //   @keyframes animate {
          //     0% {
          //       // transform-origin: right;
          //       // transform: rotate(0deg);
          //       background-position: 0 0;
          //     }
          //     50% {
          //       background-position: 100% 0;
          //       // transform-origin: right;
          //       // transform: rotate(180deg);
          //     }
          //     100% {
          //       // transform-origin: right;
          //       // transform: rotate(360deg);
          //       background-position: 0 0;
          //     }
          //     // from {
          //     //   transform-origin: right;
          //     //   transform: rotate(0deg);
          //     // }
          //     // to {
          //     //   transform-origin: right;
          //     //   transform: rotate(360deg);
          //     // }
          //   }
          // }
          &.sy, &.traceability {
            .img {
              height: 70%;
              background: url("~@/assets/farm/sy.png") bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }
          &.sc {
            .img {
              height: 70%;
              background: url("~@/assets/farm/sc.png") bottom center no-repeat;
              background-size: 71% auto;
            }
          }
          &.ZY-YY {
            .img {
              height: 70%;
              background: url("~@/assets/farm/yy.png") bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }
          &.equip {
            .img {
              height: 70%;
              background: url("~@/assets/farm/equip.png") bottom center
                no-repeat;
              // background-size: 92% 80%;
              background-size: 56% auto;
            }
          }
          &.ZY {
            .img {
              height: 70%;
              background: url("~@/assets/farm/1111.png") bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 54% auto;
            }
          }
          &.PROCESS {
            .img {
              height: 70%;
              background: url("~@/assets/farm/process.png") bottom center
                no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }
          .system-btn {
            width: auto;
            height: 35px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            // background: #0c272e;
            // // border: 2px solid;
            // // border-image: linear-gradient(180deg, #007180 0%, #00E2FF 51%, #007180 100%) 50 50;
            // border: 2px solid transparent;
            // border-radius: 3px;
            // background-clip: padding-box, border-box;
            // background-origin: padding-box, border-box;
            // // 背景和框 配置样式 （背景样式， border 颜色 ）
            // background-image: linear-gradient(to right, #0c272e, #0c272e),
            //   linear-gradient(180deg, #007180 0%, #00e2ff 51%, #007180 100%);
            // // }
            overflow: hidden;
            font-size: 19px;
            // text-shadow: 1px 1px 0px #000;
            // box-shadow: 0px 0px 3px #000;
            z-index: 1;
            left: 50%;
            transform: translateX(-50%);
            bottom: -8%;
            // &::after {
            //   content: "";
            //   height: 73px;
            //   width: 110px;
            //   background: #00e2ff;
            //   position: absolute;
            //   top: 48px;
            //   left: 0%;
            //   border-radius: 165px;
            //   box-shadow: 0px 0px 32px 15px #00e2ff;
            // }
            // &::before {
            //   content: "";
            //   height: 73px;
            //   width: 110px;
            //   background: #00e2ff;
            //   position: absolute;
            //   bottom: 48px;
            //   left: 0%;
            //   border-radius: 165px;
            //   box-shadow: 0px 0px 32px 15px #00e2ff;
            // }
          }
          .img {
            height: 100%;
            // border: 1px solid #25bda9;
            background: url("~@/assets/backmsg.png") center center no-repeat;
            background-size: 92% 80%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            p {
              width: 100%;
              text-align: center;
              padding: 2px 0;
              margin: 2px 0;
              color: $appMainBgColor;
            }
            p:first-child {
              width: 100%;
              text-align: center;
              padding: 5px 0;
              margin: 2px 0;
              color: #fffff0;
              position: absolute;
              top: -1px;
              background: #25bda9;
              letter-spacing: 2px;
              font-size: 17px;
            }
            p:last-child {
              width: 100%;
              text-align: center;
              padding: 5px 0;
              margin: 2px 0;
              color: #fffff0;
              position: absolute;
              bottom: -1px;
              background: #00000060;
              letter-spacing: 0.5px;
              font-size: 15px;
            }
            align-items: center;
          }
          .name {
            color: #000;
            text-align: center;
            font-size: 21px;
            line-height: 40px;
          }
          &:hover {
            transform: scale(1.1);
          }
          &:not(:last-child) {
            margin-right: 30px;
          }
        }
      }
    }
    .system-content:nth-child(2) {
      height: 50%;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        width: calc(100% - 120px);
        height: 1px;
        border-top: 1px dashed black;
        // background: rgb(0, 104, 108);
        top: -5px;
        left: 85px;
      }
      .system-name {
        color: #000;
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-left: 10px;
        top: 10px;
        // &::before {
        //   content: "";
        //   width: 3px;
        //   height: 30px;
        //   position: absolute;
        //   left: 0;
        //   top: 0;
        //   // background: $highBule;
        // }
        // &::after {
        //   content: "";
        //   position: absolute;
        //   width: 8px;
        //   height: 8px;
        //   border-radius: 50%;
        //   // background: $highBule;
        //   top: 11px;
        //   left: 85px;
        //   z-index: 1;
        //   box-shadow: 0 0 5px $highBule;
        // }
      }
      .system-list {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .system-choose-item {
          color: $appMainTextColor;
          text-shadow: 2px 2px 5px rgab(255, 255, 255, 0.5);

          width: 331px;
          height: 230px;
          // height: 220px;
          // transition: all 0.5s;
          .system-choose-item-body {
            border: 2.5px solid #49c4c2;
            background: #49c4c220;
            // &::after {
            //   content: "";
            //   height: 294px;
            //   width: 214px;
            //   background: #00e2ff;
            //   position: absolute;
            //   top: 269px;
            //   left: 18%;
            //   border-radius: 165px;
            //   box-shadow: 0px 0px 68px 65px #00e2ff;
            // }
            // &::before {
            //   content: "";
            //   height: 294px;
            //   width: 214px;
            //   background: #00e2ff;
            //   position: absolute;
            //   bottom: 269px;
            //   left: 18%;
            //   border-radius: 165px;
            //   box-shadow: 0px 0px 68px 65px #00e2ff;
            // }
          }
          .img {
            margin-top: 13px;
            height: 70%;
            width: 325px;
            margin-right: 0;
            // border: 1px solid #1f9b93;
            // height: 70%;
            // background-size: 71% auto;

            // height: 100%;
            // border: 1px solid #25bda9;
            // background: url("~@/assets/backmsg.png") center center no-repeat;
            background: url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg)
              center center no-repeat;
            background-size: 92% 100%;
            // background-size: auto 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            position: relative;
            z-index: 12;
            b {
              background: #00000060;
              padding: 5px 15px;
              display: none;
            }
            &.dt {
              background: url("~@/assets/farm/1111/dt.jpg") center center
                no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }
            &.dp {
              background: url("~@/assets/farm/1111/dp.jpg") center center
                no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }
            &.gc {
              background: url("~@/assets/farm/1111/gc.jpg") center center
                no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }
            &.sc {
              background: url("~@/assets/farm/1111/sc.jpg") center center
                no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }
            &.xm {
              background: url("~@/assets/farm/1111/xm.jpg") center center
                no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }
            p {
              width: 100%;
              text-align: center;
              padding: 2px 0;
              margin: 2px 0;
            }
            align-items: center;
          }
          .name {
            text-align: center;
            font-size: 21px;
            line-height: 40px;
          }
          &:hover {
            transform: scale(1.1);
            .img {
              b {
                display: inline-block;
              }
            }
          }
          &:not(:last-child) {
            margin-right: 30px;
          }
        }
      }
    }
  }
}

.copyright {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  color: white;
  line-height: 2;
  font-size: 10px;
  margin-bottom: 0;
  background-color: rgba(3, 65, 84, 1);
  height: 54px;
  position: absolute;
  width: 100%;
  bottom: 0;
}
</style>

<style lang="scss">
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.is-horizontal {
  display: none;
}
</style>
